<template>
  <view class="content">
    <view class="form">
      <view class="ipt">
        <view class="label flex">
          <text class="red">*</text>
          文章分类
        </view>
        <view class="">
          {{typeText}}
        </view>
      </view>
      <view class="ipt">
        <view class="label flex">
          <text class="red">*</text>
          文章标题
        </view>
        <view class="">
          <input type="text" :disabled="true" placeholder="请输入文章标题" placeholder-style="font-size:20rpx"
            v-model="info.article_title">
        </view>
      </view>

      <view class="iptBox">
        <view class="label flex">
          <text class="red">*</text>
          文章简介
        </view>
        <view class="">
          <u--textarea style="background-color: #fff;" :disabled="true" placeholderStyle="font-size:18rpx"
            v-model="info.article_synopsis" placeholder="请输入简介，限制50个字" maxlength="50"></u--textarea>
        </view>
      </view>
      <view class="upBox">
        <view class="label flex">
          <text class="red">*</text>
          头图
        </view>
        <view class="upImg" v-if="!info.cover_image">
          <image src="../../static/img/add.png" mode=""></image>
        </view>
        <view class="upImg" v-else style="border: none;">
          <image class="cover_image" :src="info.cover_image" mode=""></image>
        </view>
      </view>
      <view class="typeBox">
        <view class="label flex">
          <text class="red">*</text>
          类别
        </view>
        <u-radio-group v-model="radiovalue" placement="row">
          <u-radio :disabled="true" activeColor="#918D8D" labelSize="20rpx" :customStyle="{marginBottom: '8px'}"
            v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.id">
          </u-radio>
        </u-radio-group>
      </view>
      <view class="upBox" v-if="info.article_type == 2">
        <view class="label flex">
          <text class="red">*</text>
          视频
        </view>
        <view class="myVideo" v-if="info.video_url">
          <video id="myVideo" :src="info.video_url" @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
        </view>
        <view class="upImg">
          <image src="../../static/img/add.png" mode=""></image>
        </view>
      </view>
      <view class="upBox" v-if="info.article_type == 1">
        <view class="label flex">
          <text class="red">*</text>
          图文
        </view>
        <view class="aaaa">
          <u-parse :content="info.article_content"></u-parse>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        info: {
          article_id: '',
          category_id: '',
          article_title: '',
          article_synopsis: '',
          cover_image: '',
          article_type: '1',
          video_url: '',
          article_content: ''
        },
        radiolist: [{
            name: '图文',
            id: 1
          },
          {
            name: '视频',
            id: 2
          },

        ],
        radiovalue: '',
        columns: [],
        content: '',
        readOnly: false,
        formats: {},
        article_id: '',
        typeText: ''
      };
    },
    onLoad(opthion) {
      // #ifndef MP-BAIDU
      uni.loadFontFace({
        family: 'Pacifico',
        source: 'url("https://sungd.github.io/Pacifico.ttf")'
      })
      // #endif
      this.info.article_id = opthion.article_id
      this.getArticleCategoryList()
      this.getArticleDetail()
    },
    methods: {
      async getArticleDetail() {
        const {
          data: res
        } = await uni.$http.post('school/article/getArticleDetail', {
          article_id: this.info.article_id,
          type: 1
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.info.category_id = res.data.category_id
        this.info.article_title = res.data.article_title
        this.info.article_type = res.data.article_type
        this.radiovalue = res.data.article_type
        this.info.article_synopsis = res.data.article_synopsis
        this.info.cover_image = res.data.cover_image
        this.info.video_url = res.data.video_url
        this.info.article_content = res.data.article_content
        this.typeText = res.data.business_article_category.category_name
      },

      async getArticleCategoryList() {
        const {
          data: res
        } = await uni.$http.post('school/article/getArticleCategoryList')
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
        this.columns.push(res.data)
      },
    }
  }
</script>

<style lang="scss">
  @import "../../components/editor/editor-icon.css";

  .content {
    .form {
      width: 606rpx;
      margin: 20rpx auto;
      font-size: 20rpx;

      >view {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
      }

      .ipt {
        width: 606rpx;
        height: 56rpx;
        background: #FFFFFF;
        border: 2rpx solid #ECECEC;
        padding: 0 20rpx;
      }

      .iptBox {
        display: flex;
        align-items: flex-start;
        width: 606rpx;
        height: 165rpx;
        background: #FFFFFF;
        border: 2rpx solid #ECECEC;
        padding: 0 20rpx;
      }

      .upBox {
        display: flex;
        align-items: flex-start;

        .upImg {
          position: relative;
          width: 206.78rpx;
          height: 206.78rpx;
          opacity: 1;
          background: #FFFFFF;
          border: 1.75rpx solid #ECECEC;

          image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 84rpx;
            height: 84rpx;
          }

          .cover_image {
            width: 100%;
            height: 100%;
          }
        }


      }

      .typeBox {
        display: flex;
        align-items: flex-start;

        .label {
          display: flex;
          align-items: flex-start;
        }
      }

      .label {
        height: 56rpx;
        margin-right: 30rpx;

        .red {
          color: #D43030;
          margin-right: 5rpx;
        }
      }
    }

    .u-textarea {
      border: none;
      width: 420rpx;
      padding: 10rpx 0 0 0;
    }

    .uni-textarea-placeholder {
      font-size: 20rpx;
    }

    .u-radio {
      margin-right: 20rpx;
    }

    #myVideo {
      width: 206.78rpx;
      height: 206.78rpx;
      margin-right: 20rpx;
    }

    ._root {
      width: 500rpx;
    }
  }

  .addBtn {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 651rpx;
    height: 78rpx;
    background: #CCCCCC;
    border: 1.75rpx solid #69A1E0;
    text-align: center;
    line-height: 78rpx;
    font-size: 28rpx;
  }

  .aaaa {
    width: 500rpx;
    height: 500rpx;
  }

  .page-body {
    height: 500rpx;
  }

  .wrapper {
    height: 100%;
  }

  .editor-wrapper {
    height: 500rpx;
    background: #fff;
  }

  .iconfont {
    display: inline-block;
    padding: 8px 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 20px;
  }

  .toolbar {
    box-sizing: border-box;
    border-bottom: 0;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  }

  .ql-container {
    box-sizing: border-box;
    padding: 12px 15px;
    width: 100%;
    min-height: 30vh;
    height: 100%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .ql-active {
    color: #06c;
  }

  .editor-wrapper {
    padding-bottom: 100rpx;
  }
</style>